<template>
	<div class="custom_config_body">
		<el-button class="save" type="primary" @click="handleSaveConfig()">保存</el-button>
		<div class="item" v-for="(item, index) in configListData" :key="index">
			<h5>{{ item.title }}</h5>
			<template v-if="item.type === '1'">
				<el-radio-group v-model="configData[item.field]" aria-hidden>
					<el-radio v-for="(n, i) in item.options" :key="i" :label="n.value">{{ n.label }}</el-radio>
				</el-radio-group>
			</template>
			<template v-if="item.type === '2'">
				<el-checkbox-group v-model="configData[item.field]">
					<el-checkbox v-for="(n, i) in item.options" :key="i" :label="n.value">{{ n.label }}</el-checkbox>
				</el-checkbox-group>
			</template>
			<template v-if="item.type === '3'">
				<el-slider v-model="configData[item.field]" :marks="returnCustomMarks(item.options)"></el-slider>
			</template>
			<p v-if="item.content">{{ item.content }}</p>
		</div>
	</div>
</template>

<script>
import { getTranscodeConfig, updateTranscodeConfig } from '@/api/platform/transcode';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			configData: {}
		};
	},
	computed: {
		configListData() {
			return this.$isJSON(this.data.filed22) ? JSON.parse(this.data.filed22) : [];
		}
	},
	watch: {
		configListData: {
			handler(arr) {
				this.configData = this.formatConfigData(arr);
			},
			immediate: true
		}
	},
	mounted() {
		// this.getConfigData();
	},
	methods: {
		//获取配置数据
		async getConfigData() {
			let result = await getTranscodeConfig().then((res) => res.data);
		},

		//格式化配置数据
		formatConfigData(arr) {
			let obj = {};
			arr.forEach((n) => {
				if (['2'].indexOf(n.type) !== -1) {
					obj[n.field] = [];
				}
			});
			return obj;
		},

		returnCustomMarks(arr) {
			let obj = {};
			arr.forEach((n) => {
				obj[n.label] = n.value;
			});
			return obj;
		},

		handleSaveConfig() {
			console.log(this.configData);
		}
	}
};
</script>

<style lang="scss" scoped>
.custom_config_body::v-deep {
	position: relative;
	margin-top: 16px;
	background-color: #f1f1f1;
	.item {
		padding: 16px;
	}
	h5 {
		font-size: 14px;
		margin-bottom: 16px;
	}
	p {
		margin-top: 16px;
	}
	.el-slider__button {
		width: 10px;
		height: 10px;
	}
	.el-button.save {
		position: absolute;
		top: 0;
		right: 0;
		padding: 5px 10px;
	}
}
</style>
